<template>
  <div>
    <panel-group
      @handleTimedChartData="handleTimedChartData"
      :data="form.total_counts"
    />
    <el-row style="padding: 16px 16px 0">
      <line-chart :data="timedChartData" />
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="8">
        <y-basic-pie-chart :data="form.reqs_status" title="需求状态分布" />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <y-basic-pie-chart :data="form.cases_status" title="用例状态分布" />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <y-basic-pie-chart :data="form.bugs_status" title="缺陷状态分布" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Summary">
import { getProduct } from "@/api/pms/product";
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";

const { proxy } = getCurrentInstance();

const timedChartData = ref([]);

const data = reactive({
  form: {
    reqs_status: [],
    cases_status: [],
    bugs_status: [],
  },
});

const { form } = toRefs(data);

const handleTimedChartData = (type) => {
  timedChartData.value = form.value.timed_counts[type];
};

/** 获取报告详情 */
const getInfo = async () => {
  try {
    // 获取报告ID
    const id = proxy.$route.params.id;

    // 等待获取测试报告数据
    const response = await getProduct(id);
    form.value = response.data;
    timedChartData.value = form.value.timed_counts.requirement; // Set initial chart data
  } catch (error) {
    // 处理错误，例如显示错误消息或记录日志
    console.error("Failed to fetch report or history:", error);
  }
};

onMounted(getInfo);
</script>
